import { t } from 'i18next'
import React, { useState } from 'react'
import { StyledRegularMeetingDialog } from '../style'
import { CheckBox, Modal } from '@kedacom/react-next'
import { FetchRegularMeetings } from '@/api/myMeeting/interface'
export interface RegularMeetingDialogProps {
	data: FetchRegularMeetings[]
	meetingMoid: string
	isShow: boolean
	setIsShow: (v: boolean) => void
	OKCallBack: (v: string[]) => void
}
export default function RegularMeetingDialog(props: RegularMeetingDialogProps) {
	const { data, meetingMoid, isShow, setIsShow, OKCallBack } = props
	const [values, setValues] = useState<string[]>([meetingMoid])
	const handleAllChecked = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>, v: boolean) => {
		if (v) {
			let arr = data.map((i) => i.meeting_moid)
			setValues(arr)
		} else {
			setValues([])
		}
	}
	const handleItemChecked = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>, v: boolean, moid: string) => {
		let arr = [...values]
		if (v) {
			arr.push(moid)
		} else {
			arr = arr.filter((i) => i !== moid)
		}
		setValues(arr)
	}
	const handleOK = () => {
		OKCallBack(values)
		setIsShow(false)
	}
	return (
		<Modal
			width={366}
			height={258}
			title={t('取消会议')}
			open={isShow}
			onOk={handleOK}
			onCancel={() => setIsShow(false)}
			onClick={(e) => e.stopPropagation()}
			okText={t('确定')}
			cancelText={t('取消')}
		>
			<StyledRegularMeetingDialog className="regular-meeting-dialog">
				<div className="content">
					<CheckBox
						className="checked-item"
						onChange={handleAllChecked}
						checked={values.length === data.length}
					>
						{t('全部')}
					</CheckBox>
					{data.map((mt) => (
						<CheckBox
							key={mt.meeting_moid}
							value={mt.meeting_moid}
							className="checked-item"
							checked={values.indexOf(mt.meeting_moid) !== -1}
							onChange={handleItemChecked}
						>
							{mt.day}
						</CheckBox>
					))}
				</div>
			</StyledRegularMeetingDialog>
		</Modal>
	)
}
